#drag-resize {

    --color-fill: var(--color-accent);
    --color-stroke: var(--color-accent);

    position: absolute;
    z-index: 99999999;

    top: var(--top);
    left: var(--left);

    &:before {
        content:"";
        position: absolute;
        top:0;left:0;
        width: calc(var(--width) - 2rem);
        height: calc(var(--height) - 2rem);
        border: 1rem solid var(--color-accent);
        opacity: 0.2;
        pointer-events: none;
    }

    .helper {

        position: absolute;
        top:0;
        left:0;
        width: var(--width);
        height: var(--height);
        pointer-events: none;
        --alpha-fill: 0.5;
        --widget-padding: -1rem;
        opacity: 0.5;
        display: none;
        border: 1rem solid var(--color-stroke);
        @include pseudo-fill();
    }

    &.dragging .helper {
        display: block;
    }

    &.copying {
        --color-accent: var(--color-warning);
    }

    .handle {

        $size: 10rem;

        position: absolute;
        background: var(--color-fill);
        width: $size;
        height: $size;
        border: 2rem solid transparent;
        background-clip: content-box;
        // opacity: 0.75;

        &.nw {
            cursor: move;
        }

        &.e {

            top: calc(var(--height) / 2);
            left: var(--width);
            margin-left: -$size;
            margin-top: -$size / 2;
            cursor: e-resize;

        }

        &.se {

            top: var(--height);
            left: var(--width);
            margin-left: -$size;
            margin-top: -$size;
            cursor: se-resize;

        }

        &.s {

            top: var(--height);
            left: calc(var(--width) / 2);
            margin-left: -$size / 2;
            margin-top: -$size;
            cursor: s-resize;

        }

        &.full {
            width: var(--width);
            height: var(--height);
            top: 0;
            left: 0;
            opacity: 0.1;
            z-index: 1;
            margin:0;
        }
    }

}
